@import "tailwindcss";
@import "tw-animate-css";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap');

@custom-variant dark (&:is(.dark *));

@theme {
  /* User's Custom Black-to-Gray Palette */
  --gray-50: #f3f5ef;
  --gray-100: #dfe1db;
  --gray-200: #c5c7c1;
  --gray-300: #a7a9a4;
  --gray-400: #8c8d8a;
  --gray-500: #6f6f6c;
  --gray-600: #525250;
  --gray-700: #393937;
  --gray-800: #262626;
  --gray-900: #161616;
  --gray-950: #000000;

  --color-carbon-950: #000000;
  --color-carbon-900: #161616;
  --color-carbon-800: #262626;
  --color-carbon-700: #393939;
  --color-carbon-600: #525252;
  --color-carbon-500: #6f6f6f;
  --color-carbon-400: #8d8d8d;
  --color-carbon-300: #a8a8a8;
  --color-carbon-200: #c6c6c6;
  --color-carbon-100: #e0e0e0;
  --color-carbon-50: #f4f4f4;
  --color-carbon-white: #ffffff;

  /* Black Palette (matching gray for consistency) */
  --black-rich: #000000;
  --black-soft: #161616;
  --black-card: #262626;
  --black-border: #393937;
  --color-black-50: #f3f5ef;
  --color-black-100: #dfe1db;
  --color-black-200: #c5c7c1;
  --color-black-300: #a7a9a4;
  --color-black-400: #8c8d8a;
  --color-black-500: #6f6f6c;
  --color-black-600: #525250;
  --color-black-700: #393939;
  --color-black-800: #262626;
  --color-black-900: #161616;
  --color-black-950: #000000;

  /* Brand Palette (Orange #fe9a00) */
  --brand-50: #fff8e6;
  --brand-100: #ffedcc;
  --brand-200: #ffdd99;
  --brand-300: #ffcc66;
  --brand-400: #ffbb33;
  --brand-500: #fe9a00;
  --brand-600: #e68a00;
  --brand-700: #cc7a00;
  --brand-800: #b36b00;
  --brand-900: #995c00;
  --brand-950: #663d00;

  --color-brand-50: var(--brand-50);
  --color-brand-100: var(--brand-100);
  --color-brand-200: var(--brand-200);
  --color-brand-300: var(--brand-300);
  --color-brand-400: var(--brand-400);
  --color-brand-500: var(--brand-500);
  --color-brand-600: var(--brand-600);
  --color-brand-700: var(--brand-700);
  --color-brand-800: var(--brand-800);
  --color-brand-900: var(--brand-900);
  --color-brand-950: var(--brand-950);

  --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --font-display: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-inter: 'Inter', sans-serif;
  /* For Transcripts */

  /* UI Token Mappings for Tailwind v4 */
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

:root {
  --radius: 0.5rem;

  /* Light Mode - Aesthetic Gray */
  --background: #FFFFFF;
  --foreground: #111827;
  /* Gray 900 */

  --card: #FFFFFF;
  --card-foreground: #111827;

  --popover: #FFFFFF;
  --popover-foreground: #111827;

  --primary: #111827;
  /* Gray 900 */
  --primary-foreground: #F9FAFB;
  /* Gray 50 */

  --secondary: #F3F4F6;
  /* Gray 100 */
  --secondary-foreground: #111827;

  --muted: #F3F4F6;
  /* Gray 100 */
  --muted-foreground: #6B7280;
  /* Gray 500 */

  --accent: #F3F4F6;
  /* Gray 100 */
  --accent-foreground: #111827;

  --destructive: #EF4444;
  --destructive-foreground: #F9FAFB;

  --border: #E5E7EB;
  /* Gray 200 */
  --input: #E5E7EB;
  --ring: #9CA3AF;
  /* Gray 400 */

  --chart-1: #111827;
  --chart-2: #4B5563;
  --chart-3: #9CA3AF;
  --chart-4: #D1D5DB;
  --chart-5: #E5E7EB;

  --sidebar: #F9FAFB;
  /* Gray 50 */
  --sidebar-foreground: #111827;
  --sidebar-primary: #111827;
  --sidebar-primary-foreground: #F9FAFB;
  --sidebar-accent: #F3F4F6;
  --sidebar-accent-foreground: #111827;
  --sidebar-border: #E5E7EB;
  --sidebar-ring: #9CA3AF;

  /* Scrollbar (light) */
  --scroll-track: transparent;
  --scroll-thumb: #D1D5DB;
  --scroll-thumb-hover: #9CA3AF;
}

.dark {
  /* Dark Mode - Carbon Palette */
  --background: var(--color-carbon-950);
  --foreground: var(--color-carbon-50);

  --card: var(--color-carbon-900);
  --card-foreground: var(--color-carbon-50);

  --popover: var(--color-carbon-800);
  --popover-foreground: var(--color-carbon-50);

  --primary: var(--color-carbon-50);
  --primary-foreground: var(--color-carbon-900);

  --secondary: var(--color-carbon-800);
  --secondary-foreground: var(--color-carbon-50);

  --muted: var(--color-carbon-900);
  --muted-foreground: var(--color-carbon-400);

  --accent: var(--color-carbon-800);
  --accent-foreground: var(--color-carbon-50);

  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: var(--color-carbon-50);

  --border: var(--color-carbon-800);
  --input: var(--color-carbon-800);
  --ring: var(--color-carbon-400);

  --chart-1: var(--color-carbon-50);
  --chart-2: var(--color-carbon-400);
  --chart-3: var(--color-carbon-600);
  --chart-4: var(--color-carbon-800);
  --chart-5: var(--color-carbon-900);

  --sidebar: var(--color-carbon-900);
  --sidebar-foreground: var(--color-carbon-50);
  --sidebar-primary: var(--color-carbon-100);
  --sidebar-primary-foreground: var(--color-carbon-900);
  --sidebar-accent: var(--color-carbon-800);
  --sidebar-accent-foreground: var(--color-carbon-50);
  --sidebar-border: var(--color-carbon-800);
  --sidebar-ring: var(--color-carbon-400);

  /* Scrollbar (dark) */
  --scroll-track: transparent;
  --scroll-thumb: var(--color-carbon-700);
  --scroll-thumb-hover: var(--color-carbon-600);
}

@layer base {
  * {
    border-color: var(--border);
  }

  body {
    @apply bg-background text-foreground font-sans antialiased selection:bg-gray-200 dark:selection:bg-carbon-800;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-display tracking-tight;
  }

  /* Glassmorphism Utilities - Refined */
  .glass {
    @apply bg-white/80 dark:bg-carbon-950/80 backdrop-blur-xl border border-white/20 dark:border-white/10 shadow-sm;
  }

  .glass-card {
    @apply bg-white/60 dark:bg-carbon-900/60 backdrop-blur-lg border border-gray-200/50 dark:border-carbon-800/50 shadow-sm;
  }

  /* Transcript Font Utility */
  .font-transcript {
    font-family: var(--font-inter);
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
}

/* Chat Specifics */
.chat-shell {
  @apply font-sans text-base leading-relaxed;
}

.chat-shell code,
.chat-shell pre,
.chat-shell kbd,
.chat-shell samp {
  @apply font-mono;
}

.chat-sidebar {
  @apply font-sans text-sm;
}